<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-card class="box-card">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>资产管理</el-breadcrumb-item>
            <el-breadcrumb-item>资产列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-input placeholder="请输入内容" v-model="search">
                    <el-button slot="append" icon="el-icon-search" ></el-button>
                </el-input>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="adddialogVisible = true">增加资产</el-button>
              </el-col>
        </el-row>
        <el-table :data="dataList" border style="width: 100%">
            <el-table-column type="index"  label="行号" > </el-table-column>
            <el-table-column prop="name" label="类型名" > </el-table-column>
            <el-table-column prop="version" label="版本" > </el-table-column>
            <el-table-column  label="操作">
                <template  >
                  <el-tooltip content="分配权限"  effect="light" >
                    <el-button  @click="handleSetPerm(row)" type="info" icon="el-icon-setting" size="mini"></el-button>
                  </el-tooltip>
                  <el-tooltip content="修改"  effect="light" >
                    <el-button   type="info" icon="el-icon-edit" size="mini"></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除"  effect="light" >
                    <el-button  type="danger" icon="el-icon-delete" size="mini"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
        </el-table>
        <el-pagination
           @current-change="handleCurrentChange"
           :current-page="pagination.page"
           :page-size="pagination.size"
           layout="total, prev, pager, next, jumper"
           :total="pagination.total">
        </el-pagination>
    </el-card>
     <!-- 添加对话框 -->
     <el-dialog title="增加资产" :visible.sync="adddialogVisible" @close="resetForm('add')" width="80%">
      <el-form  :label-position="labelPosition" :model="addForm" :rules="addRules" ref="add" label-width="100px">
        <el-form-item label="名称" prop="citype">
          <el-select v-model="addForm.citype" placeholder="请选择" @change="handleCiTypeChanged">
            <el-option
                v-for="item in citypes"
                :key="item.id"
                :label="item.label + ':' + item.version "
                :value="item.id">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
    v-for="(domain, index) in addForm.fields"
    :label="domain.label"
    :key="domain.name + index"
    :prop="'fields.' + index + '.value'"
    :rules="
    domain.required ?{
      required: true, message: '域名不能为空', trigger: 'blur'
    }:{}"
     >
     <div v-if="domain.type.startsWith('list:') === true">
         <el-button size="mini" type="success" icon="el-icon-plus" @click="handleSubType(domain)"></el-button>
         <!--子类型的表单项-->
         <el-card v-for="(subDomain, i) in domain.children"
          :key="subDomain.id + i">
          <el-form-item
    v-for="(f, j) in subDomain.fields"
    :label="f.label"
    :key="f.name + j"
    :prop="'fields.' + index + '.children.' + i + '.fields.' + j +'.value'"
    :rules="
    f.required ?{
      required: true, message: '域名不能为空', trigger: 'blur'
    }:{}"
     >
     <el-input v-model="f.value"></el-input>
          </el-form-item>
         </el-card>
     </div>
    <div v-else><el-input v-model="domain.value"></el-input></div>
         </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>

export default {
  created() {
    this.getList()
    this.getCiTypeList()
  },
  data() {
    return {
      labelPosition: 'right',
      search: '',
      adddialogVisible: false,
      addForm: {
        citype: '',
        fields: []
        // 被观察的对象，被重新赋值后vue组件会重新渲染
      },
      addRules: {
        citype: [
          { required: true, message: '请选择资产类型', trigger: 'blur' }
        ]
      },
      pagination: {
        total: 0,
        size: 20,
        page: 1
      },
      dataList: [],
      citypes: []
    }
  },
  methods: {
    resetForm(name) {
      // const name = 'addPerm'
      // console.log('++++++++++++++++++++')
      console.log(name)
      this.$refs[name].resetFields()
      this.addForm = { citype: null, fields: [] }
    },
    handleCurrentChange(page) {
      this.getList(page)
    },
    async getList(page = 1) {
      if (!page) {
        page = 1
      }
      const { data: response } = await this.$http.get('cmdb/cis/', {
        params: {
          page
        }
      })
      if (response.code) {
        return this.$message.error(response.message)
      }
      this.dataList = response.results
      this.pagination = response.pagination
    },
    async getCiTypeList(page = 1) {
      if (!page) {
        page = 1
      }
      const { data: response } = await this.$http.get('cmdb/citypes/all/')
      if (response.code) {
        return this.$message.error(response.message)
      }
      this.citypes = response
    },
    async handleCiTypeChanged() {
      const { citype: id } = this.addForm
      const { data: response } = await this.$http.get(`cmdb/citypes/${id}/`)
      if (response.code) {
        return this.$message.error(response.message)
      }
      console.log(response)
      // {id,fields:[]}
      this.addForm.fields = response.fields
    },
    async handleSubType(domain) {
      const [, name, version] = domain.type.split(':')
      console.log(name, version)
      const { data: response } = await this.$http.get(`cmdb/citypes/${name}/${version}/`)
      if (response.code) {
        return this.$message.error(response.message)
      }
      console.log(response)
      // {id,fields:[]}
      // this.addForm.fields = response.fields
      // domain.fields = response.fields 不会产生reactive对象
      // console.log('children' in domain )
      if (!('children' in domain)) {
        this.$set(domain, 'children', [])
      }
      domain.children.push(response) // id,fields
      // this.$set(domain, 'children', response.fields)
    },
    add() {
      console.log(this.addForm)
      const name = 'add'
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          const { data: response } = await this.$http.post('cmdb/cis/', this.addForm)
          if (response.code) {
            return this.$message.error(response.message)
          }
          this.getList(this.pagination.page)
          this.adddialogVisible = false
          this.$message('资产添加成功')
          this.getList()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-form-item .el-card .el-form-item {
  margin-bottom: 24px;
}
</style>